<template>
  <view style="width: 100%; padding-top: 10upx">
    <uni-card title="欢迎您使用蓝华客服平台!" isShadow>
      <!-- <view>{{ openid || "no openid" }}</view> -->
      <template v-if="hasInfo">
        <uni-list :border="true" v-if="isShowErpCustomInfo">
          <uni-list-item
            v-for="(v, k) in customerInfo"
            :key="k"
            :title="k"
            :rightText="v"
            :border="false"
          />
        </uni-list>
        <view class="row">
          ERP用户：{{ customerInfo["客户名称"] }}
          <view
            class="button-base"
            style="width: 160upx"
            @click="isShowErpCustomInfo = !isShowErpCustomInfo"
          >
            <uni-icons
              :type="isShowErpCustomInfo ? 'eye-filled' : 'more-filled'"
              color="#fff"
            ></uni-icons>
            <text class="footer-box__item">{{
              isShowErpCustomInfo ? "隐藏明细" : "显示更多"
            }}</text>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="tips">
          <text>为了更好的为您提供服务</text>
          <text>请扫码ERP或小程序中的服务二维码</text>
          <view class="button-base" @click.stop="ScanServiceQrCode">
            <uni-icons type="scan" color="#fff"></uni-icons>
            <text class="footer-box__item">扫描</text>
          </view>
        </view>
      </template>
    </uni-card>

    <uni-card isShadow>
      <view class="tips" v-if="isHasAsk">
        <view
          class="row"
          style="padding: 0 0 16upx 0; border-bottom: 1px #eee solid"
        >
          <text style="color: #555">您当前需要解决的问题：</text>
          <view
            v-if="currentAsk['IsBind'] == 'N'"
            class="button-base"
            @click.stop="addAsk"
            style="width: 160upx"
          >
            <uni-icons type="compose" color="#fff"></uni-icons>
            <text class="footer-box__item">修改</text>
          </view>
          <view
            v-else-if="currentAsk['IsBind'] == 'Y'"
            class="button-base success"
            @click.stop="addRate"
            style="width: 160upx"
          >
            <uni-icons type="star" color="#fff"></uni-icons>
            <text class="footer-box__item">服务评分</text>
          </view>
        </view>
        <text style="padding: 30upx 0 50upx 0">{{ currentAsk["Ask"] }}</text>
        <block slot="footer">
          <view style="display: flex; justify-content: center; width: 100%">
            <view class="button-base seveice success">
              <uni-icons size="30" type="weixin" color="#fff"></uni-icons>
              <text class="footer-box__item" style="font-size: 32upx"
                >联系客服</text
              >
              <button
                class="seveice-button"
                @contact="handleContact"
                type="primary"
                open-type="contact"
                :session-from="customerInfo['客户编号'] || 'temp'"
              ></button>
            </view>
          </view>
        </block>
      </view>
      <view v-else class="tips">
        <text>为了准确为您安排客服人员</text>
        <view style="height: 10upx"></view>
        <text>请登记您需要处理的问题</text>
        <view style="height: 20upx"></view>
        <view class="button-base" @click.stop="addAsk" style="width: 160upx">
          <uni-icons type="compose" color="#fff"></uni-icons>
          <text class="footer-box__item">开始登记</text>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
const apis = {
  GetRegInfo: "Service/GetRegInfo",
};
import { mapState, mapMutations } from "vuex";
export default {
  NAVTITLE: "蓝华客服",
  data() {
    return {
      isShowErpCustomInfo: false,
      cid: "",
      dataList: [],
      dynamicStyle: {
        sticky: false,
        top: -uni.upx2px(40),
        width: 80,
        radius: uni.upx2px(40),
      },
      cardData: {},
    };
  },
  // onPageScroll: function(e) {},
  onLoad(opt) {
    let parms = this.GLOBAL.parseUrl(decodeURIComponent(opt.q), "index");
    console.log(JSON.stringify(parms));
    if (parms.cid != undefined) {
      this.cid = parms.cid;
      this.GetCustomerInfo(parms.cid);
    } else {
    }
  },
  mounted() {
    this.getSessionList();
  },
  computed: {
    ...mapState(["customerInfo", "hasInfo", "openid", "currentAsk"]),
    isHasAsk() {
      return this.currentAsk["Ask"] ? true : false;
    },
  },
  methods: {
    ...mapMutations(["updateCustomerInfo", "updateOpenid", "updateAsk"]),
    async getSessionList() {
      try {
        if (!this.openid) {
          let resOfLogin = await this.uLogin();
          let resOfGetOpenid = await this.$request("open/getopenid", {
            codes: resOfLogin.code,
          });
          this.updateOpenid(resOfGetOpenid.data.data);
        }
        let _sessionList = await this.$request("Service/GetCurrentAsk", {
          openid: this.openid,
        });

        let _currentAsk = {
          Ask: "",
          aid: "",
          Create_id: "",
          IsDependRemote: "",
          IsWinAuth: "",
          Phone: "",
          RemoteAccount: "",
          RemoteAuth: "",
          RemoteType: "",
          Sender: "",
          WinPwd: "",
          WinUser: "",
          Customer_id: "",
          Session_id: "",
        };
        if (_sessionList.data.data.length > 0)
          _currentAsk = _sessionList.data.data[0];

        this.updateAsk(_currentAsk);
      } catch (e) {
        this.$alert("获取历史服务记录失败！");
      }
    },

    async uLogin() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: "weixin",
          success: (res) => {
            resolve(res);
          },
          fail: (err) => {
            reject("授权登录失败：" + JSON.stringify(err));
          },
        });
      });
    },

    handleContact(e) {
      const url = e.detail.path + this.$objToParam(e.detail.query);
      if (url.indexOf("addRate") > -1) {
        return uni.navigateTo({ url });
      }

      const _api = `https://ser.lanhuasoft.com/api/pay/QueryPayOrder`;
      this.$request(_api, { out_trade_no: e.detail.query["sn"] }).then(
        (res) => {
          let rep = JSON.parse(res.data.data);
          if (
            rep["code"] == "ORDER_NOT_EXIST" ||
            rep["trade_state"] == "NOTPAY"
          ) {
            uni.navigateTo({ url });
          } else if (rep["trade_state"] == "SUCCESS") {
            this.$alert("您已经支付成功！");
          }
        }
      );
    },

    addRate() {
      uni.navigateTo({
        url: `/pages/index/addRate?aid=${this.currentAsk["aid"]}`,
      });
    },
    addAsk() {
      uni.navigateTo({
        url: "/pages/index/addAsk",
      });
    },
    // goPay() {
    //   uni.navigateTo({
    //     url: "/pages/pay/index",
    //   });
    // },
    GetCustomerInfo(cid) {
      this.GLOBAL.request(
        apis.GetRegInfo,
        { cid: this.cid },
        "GET",
        (res) => {
          this.updateCustomerInfo(res.data);
        },
        (err) => {}
      );
      // let infos =  {
      // 	"名称":"阿姨呀服装厂",
      // 	"联系人":"张三",
      // 	"注册数":"20",
      // 	"到期时间":"2021-12-10",
      // 	"移动端":"是",
      // 	"计件":"是",
      // 	"进销存":"是"};
      // this.updateCustomerInfo(infos)
    },

    GetAuthorize(utype, sid) {
      this.GLOBAL.request(
        "Service/GetAuthorize",
        {
          utype: utype,
          sid: sid,
        },
        "GET",
        (res) => {
          this.cardData = res.data;
          console.log("GetAuthorize:", this.cardData);
          this.authorize(this.cardData);
        },
        (err) => {
          console.log("获取用户信息失败:", err);
        }
      );
    },
    ScanServiceQrCode() {
      uni.scanCode({
        success: (res) => {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
          let parms = this.GLOBAL.parseUrl(res.result, "index");
          if (parms.cid != undefined) {
            this.cid = parms.cid;
            this.GetCustomerInfo(parms.cid);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-button {
  width: 94%;
  margin-left: 3%;
  z-index: 99;
}

.tips {
  display: flex;
  flex-direction: column;
  color: #999999;
}

.footer-box {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.footer-box__item {
  display: flex;
  align-items: center;
  margin-left: 4px;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
}

.footer-box__item:active {
  color: $color-warning;
}

.button-base {
  // margin: 10upx 0 0 0;
  border-radius: 10upx;
  width: 110upx;
  padding: 8upx 16upx;
  background: $color-primary;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seveice {
  width: 240upx;
  height: 68upx;
  position: relative;
}
.seveice-button {
  width: 272upx;
  height: 86upx;
  position: absolute;
  border: 0px;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0);
}

.success {
  background: $color-success;
}
.moreButton {
  border-radius: 10upx;
  padding: 8upx 12upx;
  background: $color-primary;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
